<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>学生信息管理系统</title>
    <script src="/js/jquery-3.7.1.min.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/source/plugins/fontawesome-free/css/all.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- JQVMap -->
    <link rel="stylesheet" href="/source/plugins/jqvmap/jqvmap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/source/dist/css/adminlte.min.css">
    <!-- overlayScrollbars -->
    <link rel="stylesheet" href="/source/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="/source/plugins/daterangepicker/daterangepicker.css">
    <!-- summernote -->
    <link rel="stylesheet" href="/source/plugins/summernote/summernote-bs4.min.css">

    <!-- Tempusdominus Bootstrap 4 -->
<!--    <link rel="stylesheet" href="/source/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">-->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/js/plugins/bootstraptable/bootstrap-table.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="/source/plugins/icheck-bootstrap/icheck-bootstrap.min.css">


    <script src="/js/plugins/bootstraptable/bootstrap-table.min.js"></script>



</head>

<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">

    <!-- Preloader -->
    <div class="preloader flex-column justify-content-center align-items-center">
        <img class="animation__shake" src="/source/dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
    </div>

    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="#" class="nav-link">Home</a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="#" class="nav-link">Contact</a>
            </li>
        </ul>

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <!-- Navbar Search -->
            <li class="nav-item">
                <a class="nav-link" data-widget="navbar-search" href="#" role="button">
                    <i class="fas fa-search"></i>
                </a>
                <div class="navbar-search-block">
                    <form class="form-inline">
                        <div class="input-group input-group-sm">
                            <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
                            <div class="input-group-append">
                                <button class="btn btn-navbar" type="submit">
                                    <i class="fas fa-search"></i>
                                </button>
                                <button class="btn btn-navbar" type="button" data-widget="navbar-search">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </li>

            <!-- Messages Dropdown Menu -->
            <li class="nav-item dropdown">
                <a class="nav-link" data-toggle="dropdown" href="#">
                    <i class="far fa-comments"></i>
                    <span class="badge badge-danger navbar-badge">3</span>
                </a>
                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                    <a href="#" class="dropdown-item">
                        <!-- Message Start -->
                        <div class="media">
                            <img src="/source/dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
                            <div class="media-body">
                                <h3 class="dropdown-item-title">
                                    Brad Diesel
                                    <span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
                                </h3>
                                <p class="text-sm">Call me whenever you can...</p>
                                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
                            </div>
                        </div>
                        <!-- Message End -->
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <!-- Message Start -->
                        <div class="media">
                            <img src="/source/dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
                            <div class="media-body">
                                <h3 class="dropdown-item-title">
                                    John Pierce
                                    <span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
                                </h3>
                                <p class="text-sm">I got your message bro</p>
                                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
                            </div>
                        </div>
                        <!-- Message End -->
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <!-- Message Start -->
                        <div class="media">
                            <img src="/source/dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
                            <div class="media-body">
                                <h3 class="dropdown-item-title">
                                    Nora Silvester
                                    <span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
                                </h3>
                                <p class="text-sm">The subject goes here</p>
                                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
                            </div>
                        </div>
                        <!-- Message End -->
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
                </div>
            </li>
            <!-- Notifications Dropdown Menu -->
            <li class="nav-item dropdown">
                <a class="nav-link" data-toggle="dropdown" href="#">
                    <i class="far fa-bell"></i>
                    <span class="badge badge-warning navbar-badge">15</span>
                </a>
                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                    <span class="dropdown-item dropdown-header">15 Notifications</span>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <i class="fas fa-envelope mr-2"></i> 4 new messages
                        <span class="float-right text-muted text-sm">3 mins</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <i class="fas fa-users mr-2"></i> 8 friend requests
                        <span class="float-right text-muted text-sm">12 hours</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item">
                        <i class="fas fa-file mr-2"></i> 3 new reports
                        <span class="float-right text-muted text-sm">2 days</span>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-widget="fullscreen" href="#" role="button">
                    <i class="fas fa-expand-arrows-alt"></i>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-widget="control-sidebar" data-controlsidebar-slide="true" href="#" role="button">
                    <i class="fas fa-th-large"></i>
                </a>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="#" class="brand-link" style="line-height: 2.5">
            <img src="/source/dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
                 style="opacity: .8">
            <span class="brand-text font-weight-light">AdminLTE 3</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar user panel (optional) -->
            <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                <div class="image">
                    <img src="/source/dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
                </div>
                <div class="info">
                    <a href="#" class="d-block">Alexander Pierce</a>
                </div>
            </div>

            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                       with font-awesome or any other icon font library -->
                    <li class="nav-item menu-open">
                        <a href="#" class="nav-link active">
                            <i class="nav-icon fas fa-tachometer-alt"></i>
                            <p>
                                Dashboard
                                <i class="right fas fa-angle-left"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview" onclick="return indexLocation(this);">
                            <li class="nav-item">
                                <a href="#" class="nav-link active">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>学生信息</p>
                                </a>
                            </li>
                            <li class="nav-item" onclick="return indexLocation(this);">
                                <a href="#" class="nav-link" onclick='window.location.href="/teacher/list";'>
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>教师信息</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link" onclick='window.location.href="/class/list";'>
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>课程信息</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link" onclick='window.location.href="/score/list";'>
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>成绩信息</p>
                                </a>
                            </li>
                        </ul>
                    </li>

                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <div class="container-fluid">
            <div
                    style="width:100%;text-align: center;font-size: 20px;padding: 40px;margin-bottom: 10px;margin-top: 10px;font-family: '宋体'; font-weight: bold;background-color: #467897;overflow: hidden">
                <span style="color: white">学生信息管理</span>
            </div>
            <br>

            <form class="form-inline" >

                <div class="form-group" style="display: flex">
                    <label for="searchName" >请输入名字</label>
                    <input type="text" class="form-control" id="searchName" placeholder="请输入名字" name="searchName">
                    <button type="button" class="btn btn-default btn-primary" onclick="search();"
                            style="margin-left: 10px">查询</button>
                    <!-- Button trigger modal -->
                </div>



                <div class="form-group" style="display: flex; margin-left: 20px">
                    <label for="searchNo">请输入学号</label>
                    <input type="text" class="form-control" id="searchNo" placeholder="请输入学号" name="searchNo">
                    <button type="button" class="btn btn-default btn-primary" onclick="search1();"
                            style="margin-left: 10px">查询</button>
                    <!-- Button trigger modal -->


                </div>
                <button type="button" class="btn btn-default btn-primary" data-toggle="modal" data-target="#myModal"
                        style="margin-left: 20px">
                    新增学生
                </button>
            </form>
            <hr>
            <table class="table table-bordered table-hover " style="background-color: #C8C7C5" id="stuTable">

            </table>
        </div>

        <!--新增信息表单-->
        <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="display: inline">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">新增学生信息</h4>
                    </div>
                    <div class="modal-body">


                        <form id="formStudent">

                            <input hidden="hidden" id="id" />
                            <div class="form-group">
                                <label for="name">姓名</label>
                                <input type="text" class="form-control" id="name" name="name" placeholder="姓名">
                            </div>
                            <div class="form-group">
                                <label for="no">学号</label>
                                <input type="text" class="form-control" id="no" name="no" placeholder="学号">
                            </div>
                            <div class="form-group">
                                <label for="age">年龄</label>
                                <input type="text" class="form-control" id="age" name="age" placeholder="年龄">
                            </div>
                            <div class="form-group">
                                <label for="password">密码</label>
                                <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                            </div>
                            <div class="form-group">
                                <label for="sex">性别</label>
                                <select class="form-control" id="sex" name="sex">
                                    <option value="1">男</option>
                                    <option value="2">女</option>
                                </select>
                            </div>
                        </form>
                        <!--表单结束-->

                    </div>
                    <div class="modal-footer">
                        <!--                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
                        <button type="submit" class="btn btn-primary" onclick="addStudent();" form="formStudent">确认</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <!--查询信息表单-->
        <div class="modal fade" tabindex="-1" role="dialog" id="find_modal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="display: inline">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">学生信息查询</h4>
                    </div>
                    <div class="modal-body">


                        <form id="formStudentfind">

                            <input hidden="hidden" id="id1" />
                            <div class="form-group">
                                <label for="name">姓名</label>
                                <input type="text" class="form-control" id="name1" name="name" placeholder="请输入需要查询学生的姓名">
                            </div>
                            <div class="form-group">
                                <label for="sex">性别</label>
                                <select class="form-control" id="sex1" name="sex">
                                    <option value="1">男</option>
                                    <option value="2">女</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="no">学号</label>
                                <input type="text" class="form-control" id="sid" name="score" placeholder="学号">
                            </div>
                        </form>
                        <!--表单结束-->

                    </div>
                    <div class="modal-footer">
                        <!--                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
                        <button type="button" class="btn btn-primary" onclick="findStudent(findStudentName());">查询</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <!--更改信息表单-->
        <div class="modal fade" tabindex="-1" role="dialog" id="update_modal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="display: inline">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">学生信息修改</h4>
                    </div>
                    <div class="modal-body">


                        <form id="formStudentUpdate">

                            <input hidden="hidden" id="id_update" />
                            <div class="form-group">
                                <label for="id">id</label>
                                <input type="text" class="form-control" id="sid_update" name="id" placeholder="id">
                            </div>
                            <div class="form-group">
                                <label for="no">学号</label>
                                <input type="text" class="form-control" id="sno_update" name="no" placeholder="no">
                            </div>
                            <div class="form-group">
                                <label for="age">年龄</label>
                                <input type="text" class="form-control" id="sage_update" name="age" placeholder="age">
                            </div>
                            <div class="form-group">
                                <label for="name">姓名</label>
                                <input type="text" class="form-control" id="name_update" name="name" placeholder="姓名">
                            </div>
                            <div class="form-group">
                                <label for="password">密码</label>
                                <input type="password" class="form-control" id="password_update" name="password" placeholder="密码">
                            </div>
                            <div class="form-group">
                                <label for="sex">性别</label>
                                <select class="form-control" id="sex_update" name="sex">
                                    <option value="1">男</option>
                                    <option value="2">女</option>
                                </select>
                            </div>
                        </form>
                        <!--表单结束-->

                    </div>
                    <div class="modal-footer">
                        <!--                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
                        <button type="submit" class="btn btn-primary" onclick="editedStudent();"
                                form="formStudentUpdate">确认修改</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

    </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer">
        <strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong>
        All rights reserved.
        <div class="float-right d-none d-sm-inline-block">
            <b>Version</b> 3.2.0
        </div>
    </footer>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="/source/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="/source/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
    $.widget.bridge('uibutton', $.ui.button)
</script>

<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="/js/index.js"></script>
<script src="/js/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/js/plugins/validate_dist/jquery.validate.min.js"></script>
<script src="/js/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<!-- Bootstrap 4 -->
<!--<script src="/source/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>-->
<!-- ChartJS -->
<!--<script src="/source/plugins/chart.js/Chart.min.js"></script>-->
<!-- Sparkline -->
<script src="/source/plugins/sparklines/sparkline.js"></script>
<!-- JQVMap -->
<script src="/source/plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="/source/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<!-- jQuery Knob Chart -->
<script src="/source/plugins/jquery-knob/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="/source/plugins/moment/moment.min.js"></script>
<!--<script src="/source/plugins/daterangepicker/daterangepicker.js"></script>-->
<!-- Tempusdominus Bootstrap 4 -->
<!--<script src="/source/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>-->
<!-- Summernote -->
<script src="/source/plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="/source/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="/source/dist/js/adminlte.js"></script>
<!-- AdminLTE for demo purposes -->


<script type="text/javascript">

    function newstu() {

        $('#formStudent').modal('show');

    }
    function addStudent() {
        // 表单验证
        $("#formStudent").validate({

            rules: {
                name: {
                    required: true,
                    minlength: 2,
                    maxlength: 20,
                },
                no: {
                    required: true,
                    minlength: 10,
                    maxlength: 10,
                },
                age: {
                    required: true,
                    max: 70,
                    min: 8,
                },
                password: {
                    required: true,
                },

            },
            messages: {
                name: "名字长度必须为2~20个字符",
                no: "学号长度必须为十位数",
                age: "年龄须在8到70岁之间",
                password: "密码必须为六位",

            },
            submitHandler: function (form) {
                var data = $("#formStudent").serialize();
                $.ajax({
                    url: "/webapi/student/insert",
                    method: "post",
                    data: data

                }).done(function () {
                    $('#stuTable').bootstrapTable("destroy");
                    loadTable();
                    $('#myModal').modal('hide');
                })
            }
        })


    }

    function editedStudent() {
        $("#formStudentUpdate").validate({

            rules: {
                name: {
                    required: true,
                    minlength: 2,
                    maxlength: 20,
                },
                no: {
                    required: true,
                    minlength: 10,
                    maxlength: 10,
                },
                age: {
                    required: true,
                    max: 70,
                    min: 8,
                },
                password: {
                    required: true,
                    minlength: 6,
                    maxlength: 6,
                },
            },
            messages: {
                name: "名字长度必须为2~20个字符",
                no: "学号长度必须为十位数",
                age: "年龄须在8到70岁之间",
                password: "密码必须为六位",
            },
            submitHandler: function (form) {
                console.log("123")
                var data = $("#formStudentUpdate").serialize();
                var id = $('#sid_update').val();
                data += "&id=" + id;
                $.ajax({
                    url: "/webapi/student/update",
                    method: "put",
                    data: data

                }).done(function () {

                    $('#stuTable').bootstrapTable("destroy");
                    loadTable();
                    $('#update_modal').modal('hide');
                })
            }
        })


    }
    function editStudent(id) {

        $('#update_modal').modal('show');

        $.ajax({
            url: '/webapi/student/get/' + id
        }).done(function (rs) {
            $("#sid_update").val(rs.id);
            $("#sno_update").val(rs.no);
            $("#sage_update").val(rs.age);
            $("#name_update").val(rs.name);
            $("#password_update").val("123456");
            $("#sex_update").val(rs.sex);

        })
    }

    function findStudentName() {
        return document.getElementById('name1').value;
    }
    function findStudent(name) {
        $('#find_modal').modal('show');
        $.ajax({
            url: '/webapi/student/gets/' + name
        }).done(function (rs) {

            $("#sid").val(rs.no);
            $("#name1").val(rs.name);
            $("#sex1").val(rs.sex);

        })

    }

    function search() {
        $('#stuTable').bootstrapTable("destroy");
        loadTable();
    }

    function search1() {
        $('#stuTable').bootstrapTable("destroy");
        loadTable1();
    }

    function deleteStudent(id) {
        if (confirm("确认删除？")) {
            $.ajax({
                url: "/webapi/student/delete/" + id,
                method: "delete"

            }).done(function () {
                $('#stuTable').bootstrapTable("destroy");
                loadTable();
            })
        }

    }

    function loadTable() {
        $('#stuTable').bootstrapTable({
            url: '/webapi/student/getbypage',
            striped: true,//隔行变色效果
            pagination: true,//显示底部分页条
            singleSelect: false,//可以多选
            pageSize: 3,//如果设置了分页，每页数据条数
            pageNumber: 1,//如果设置了分页，首页页码
            sidePagination: "server",//设置在哪里进行分页，client或server
            queryParams: function (params) {
                var paraObj = {
                    size: params.limit,
                    page: params.offset / params.limit,
                    sort: "id",
                    direct: "desc",
                    name: $("#searchName").val(),
                };
                return paraObj;
            },

            columns: [{
                field: 'no',
                title: '学号'
            }, {
                field: 'name',
                title: '姓名'
            }, {
                field: 'age',
                title: '年龄'
            }, {
                field: 'sex',
                title: '性别',
                formatter: function (value, row) {
                    let result = "";
                    if (row.sex == 1) result += "男";
                    if (row.sex == 2) result += "女";
                    if (row.sex == 0) result += "保密";
                    return result;
                }
            },
                {

                    width: 300,
                    field: 'operate',
                    title: '操作',
                    formatter: function (value, row) {
                        let result = "";
                        result += "<button id='edit' class='btn btn-info' onclick='editStudent(" + row.id + "); 'style='margin-left:10px;'>编辑</button>";
                        result += "<button id='delete' class='btn btn-danger' onclick='deleteStudent(" + row.id + ");' style='margin-left:20px;'>删除</button>";
                        return result;
                    }
                }]
        })
    }//end of load table

    function loadTable1() {
        $('#stuTable').bootstrapTable({
            url: '/webapi/student/getbypageno',
            striped: true,//隔行变色效果
            pagination: true,//显示底部分页条
            singleSelect: false,//可以多选
            pageSize: 3,//如果设置了分页，每页数据条数
            pageNumber: 1,//如果设置了分页，首页页码
            sidePagination: "server",//设置在哪里进行分页，client或server
            queryParams: function (params) {
                var paraObj = {
                    size: params.limit,
                    page: params.offset / params.limit,
                    sort: "id",
                    direct: "desc",
                    no: $("#searchNo").val(),
                };
                return paraObj;
            },

            columns: [{
                field: 'no',
                title: '学号'
            }, {
                field: 'name',
                title: '姓名'
            }, {
                field: 'sex',
                title: '性别',
                formatter: function (value, row) {
                    let result = "";
                    if (row.sex == 1) result += "男";
                    if (row.sex == 2) result += "女";
                    if (row.sex == 0) result += "保密";
                    return result;
                }
            }, {

                    width: 300,
                    field: 'operate',
                    title: '操作',
                    formatter: function (value, row) {
                        let result = "";
                        result += "<button id='edit' class='btn btn-info' onclick='editStudent(" + row.id + "); 'style='margin-left:10px;'>编辑</button>";
                        result += "<button id='delete' class='btn btn-danger' onclick='deleteStudent(" + row.id + ");' style='margin-left:20px;'>删除</button>";
                        return result;
                    }
                }]
        })
    }//end of load table

    $(function () {
        loadTable();
    })

</script>

</body>

</html>